<template>
	<div class="login">
		<div class="login-imgbox"><img src="../assets/images/login-logo.png" alt=""></div>
		<div class="form-body">
			<el-form ref="form" :model="user">
				<el-form-item>
					<el-input v-model="user.userid" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="user.pwd" show-password placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="user.email" placeholder="请输入邮箱" prefix-icon="el-icon-suitcase-1"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="form-login" @click="Register()">注册</el-button>
				</el-form-item>
				<span class="re-login" @click="$router.push('/login')">我已注册,点击登录</span>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {register} from "@/api/user/user.js"
	export default {
		data() {
			return {
				// 定义注册数据
				user:{userid:"",userpwd:"",email:""}
			}
		},
		methods:{
			Register(){
				// 如果用户传入了loading配置，则启用加载提示，不传则不显示加载提示
				register(this.user,{loading:{text:"注册中，请稍等..."}})
				.then(res=>{
					// alert(res.data.msg);
					if(res.data.status==1){
						// 成功提示
						this.$message({
							message:res.data.msg,
							type:'success'
						})
						// 跳转到登录页面
						this.$router.push("/login")
					}else{
						// 失败提示
						this.$message({
							message:res.data.msg,
							type:'warning'
						})
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.login{
		width: 100%;
		height: 100%;
		background: url(../assets/images/login-bg.jpg) no-repeat center/100% 100%; 
		overflow: hidden;
	}
	.login .login-imgbox{
		width: 410px;
		height: 190px;
		margin: 100px auto;
	}
	.login .form-body{
		width: 350px;
		margin: 100px auto;
	}
	.form-body .form-login{
		width: 100%;
	}
	.form-body .re-login{
		color: #ffaa00;
	}
</style>